import AModal from '@/components/AModal';
import { updateInfo } from '@/services/cust/userIntegralManage';
import { ProCard } from '@ant-design/pro-components';
import { useDispatch, useSelector } from '@umijs/max';
import { Button } from 'antd';
import FormRender, { useForm } from 'form-render';
import { useEffect } from 'react';
import SetNumber from '../component/SetNumber';

import { useRequest } from 'ahooks';

export default () => {
  const form = useForm();
  const {
    userIntegralManage: { visible, queryInfo, type },
  } = useSelector((state) => state);

  const dispatch = useDispatch();
  const update = (data) => {
    dispatch({
      type: 'userIntegralManage/update',
      payload: data,
    });
  };

  const fn = {
    edit: updateInfo,
  };

  const { loading: isLoading, run: mutateAsync } = useRequest(
    fn[type],
    {
      manual: true,
      onSuccess: ({ code }) => {
        if (code === 200) {
          update({
            visible: false,
            reload: true,
            type: '',
            queryInfo: {},
          });
        }
      },
    }
  );


  useEffect(() => {
    if (visible) {
      form.setValues({
        changeNumObject: {
          changeType: 0,
          changeNum: undefined,
        },
        changeRemark: undefined,
      });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [visible, queryInfo]);

  // eslint-disable-next-line
  const onFinish = (values) => {
    const params = {
      changeRemark: values.changeRemark,
      changeType: values?.changeNumObject?.changeType,
      changeNum: values?.changeNumObject?.changeNum,
      userId: queryInfo?.userId,
    };
    mutateAsync(params);
  };

  return (
    <AModal
      open={visible}
      width={600}
      onCancel={() => update({ visible: false })}
      footer={
        <div style={{ paddingBottom: 24, paddingRight: 24 }}>
          <Button key="cancel" onClick={() => update({ visible: false })}>
            取消
          </Button>
          <Button key="save" type="primary" loading={isLoading} onClick={form.submit}>
            确认
          </Button>
        </div>
      }
    >
      <ProCard title="设置积分数量" headerBordered bodyStyle={{ paddingBottom: 0 }}>
        <FormRender
          form={form}
          widgets={{ setNumber: SetNumber }}
          schema={{
            type: 'object',
            properties: {
              changeNumObject: {
                title: '数量',
                type: 'object',
                widget: 'setNumber',
                span: 24,
                props: {
                  options: [
                    { label: '+（增加）', value: 0 },
                    { label: '-（减少）', value: 1 },
                  ],
                  placeholder: '设置数量',
                },
              },
              changeRemark: {
                title: '备注',
                type: 'string',
                widget: 'textArea',
                span: 24,
                props: {
                  allowClear: true,
                  rows: 4,
                  showCount: true,
                  maxLength: 20,
                },
                placeholder: '请输入备注',
              },
            },
          }}
          onFinish={onFinish}
        />
      </ProCard>
    </AModal>
  );
};
